<template>
  <div class="tabbar-wrapper">
    <div v-for="(item, index) in list" :key="index" class="tab-item" @click="clickTab(item)">
      <div
        :style="{
          width: item.width ? item.width / 75 + 'rem' : 48 / 75 + 'rem',
          height: item.height ? item.height / 75 + 'rem' : 48 / 75 + 'rem'
        }"
      >
        <img :src="current === index ? item.activeIcon : item.icon" :alt="item.name" />
      </div>

      <div :class="{ 'active-tab': current === index }" class="mt-5">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { defineProps, defineEmits, getCurrentInstance } from 'vue'
const props = defineProps({
  current: {
    type: Number,
    default: 0
  },
  list: {
    type: Array,
    require: true
    // default() {
    //   return [
    //     {
    //       name: '首页',
    //       activeIcon: require('@/assets/images/tabbar/home-active.png'),
    //       icon: require('@/assets/images/tabbar/home.png'),
    //       url: 'home'
    //     },
    //     {
    //       name: '我的',
    //       activeIcon: require('@/assets/images/tabbar/my-active.png'),
    //       icon: require('@/assets/images/tabbar/my.png'),
    //       url: 'my'
    //     }
    //   ]
    // }
  },
  mode: {
    type: String,
    default: 'replace'
  }
})
const router = useRouter()

// 切换tab
// const selectTab = (index, item) => {
//   if (index == props.current) {
//     return
//   }
//   // 控制跳转模式
//   let mode = item.mode || props.mode || 'replace'

//   router[mode]({ name: props.list[index].url })
// }
const emits = defineEmits(['clickTab'])

const clickTab = (item) => {
  emits('clickTab', item)
}
console.log('%c ctx:', 'font-size:16px;background: #3F7CFF; color: #FFFFFF;', ctx)
console.log('%c proxy:', 'font-size:16px;background: #3F7CFF; color: #FFFFFF;', proxy)
</script>

<style lang="scss" scoped>
.tabbar-wrapper {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 98px;
  background-color: #ffffff;
  padding-bottom: constant(safe-area-inset-bottom); /*  兼容iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /*  兼容iOS > 11.2 */
  .tab-item {
    display: flex;
    justify-content: center;
    flex: 1;
    flex-direction: column;
    align-items: center;
    color: #999999;
    font-size: 26px;
  }
}
.active-tab {
  color: #4880ff;
}
</style>
